<template>
  <div id="myLineChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { getYearsNum } from '@/api/housingFacilities.js';
const props = defineProps({
    type: {
        default: 0,
        type: Number,
    },
})
const { type } = toRefs(props)
const data = ref([])
const xAxisData = ref([])
const yAxisData1 = ref([]) //详查
const yAxisData2 = ref([]) //普查
let series = ref([])
let legend = ref({})
function getData() {
  getYearsNum().then((res) => {
      data.value = res.data
      xAxisData.value = res.data.map(item=>item.collectYear)
      yAxisData1.value = res.data.map(item=>item.universalBuildingNum)
      yAxisData2.value = res.data.map(item=>item.detailBuildingNum)
      series.value = [
        {
          name: "详查",
          type: "line",
          stack: '总量',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, 
            [
              {
                offset: 0,
                color: 'rgba(70, 255, 255, 1)'
              },
              {
                offset: 1,
                color: 'rgba(70, 255, 255, 0)'
              }
            ])
          },
          data: yAxisData1.value,
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 6, //折线点的大小
          itemStyle : { 
              normal : { 
                  color:'#46FFFF', //改变折线点的颜色
                  lineStyle:{ 
                      color:'#46FFFF', //改变折线颜色
                      width:1,//改变粗细  
                  } 
              } 
          },
        },
        {
          name: "普查",
          type: "line",
          stack: '总量',
          data: yAxisData2.value,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, 
            [
              {
                offset: 0,
                color: 'rgba(255, 179, 91, 1)'
              },
              {
                offset: 1,
                color: 'rgba(255, 179, 91, 0.4)'
              }
            ])
          },
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 6, //折线点的大小
          itemStyle : { 
              normal : { 
                  color:'#FFB35B', //改变折线点的颜色
                  lineStyle:{ 
                      color:'#FFB35B', //改变折线颜色
                      width:1,//改变粗细  
                  } 
              } 
          },
        },
      ]
      if(!type.value){
        legend.value = {
          top: 20,
          right: 6,
          icon: "square",
          itemHeight: 6, 
          itemWidth: 8,
          textStyle: {
            color: "#fff",
          },
        }
      }else{
        legend.value = {
          show: false
        }
      }
      // 普查
      if(type.value === 1){
        series.value.shift()
      }
      // 详查
      if(type.value === 2){
        series.value.pop()
      }
      renderChart(series.value, legend.value)
  });
}


let myChart = null;
const renderChart = (series,legend) =>{
  if (!myChart) {
		myChart = echarts.init(document.getElementById('myLineChart'));
	}
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '2%',
      right: '6%',
      bottom: '4%',
      containLabel: true
    },
    // 标注
    legend: legend,
    // x轴
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData.value,
      // x轴样式
      axisLine: {
        lineStyle: {
          color: '#30374A',
          show: false,
        }
      },
      //x轴文字的配置
      axisLabel: {
        textStyle: {
          color:' #fff',
        },
      },
      margin: 9,
      name:'年',
      nameTextStyle:{
        color:'#fff'
      },
      // algin:'right',
    },
    // y轴
    yAxis: {
      type:'value',
      min: 0,
      // max: 20,
      // y轴样式
      axisLine: {
        show: false,
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color:'rgba(255,255,255,0.5)',
        },
      },
      // 背景线条
      splitLine: {
        lineStyle: {
          color: 'rgba(71,90,219,0.5)',
          type: 'dashed'
        }
      },
      name:'栋数            ',
      nameTextStyle:{
        color:'#fff',
      },
    },
    series: series,
    // 刻度线
    axisTick: {
        show: false,
        length: 0,
        lineStyle: {
            color:'transparent',
            type: 'solid',
            width: 1
        },
        alignWithLabel: false 
    },
  };
  // 渲染
	option && myChart.setOption(option);
}
onMounted(() => {
  getData()
  window.addEventListener('resize', resize)
})
const resize = () => {
  myChart.resize()
}
onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})
</script>
<style lang='scss' scoped>
#myLineChart{
  width: 430px;
  height: 250px;
  margin: -20px auto 0;
  font-size: 14px;
}
</style>